<template>
  <page-meta
    :page-style="'overflow:' + (popupShow ? 'hidden' : 'visible')"
  ></page-meta>
  <view class="container">
    <HeadNav title="卡牌" />
    <view class="search-bar">
      <input
        v-if="showSearchInput"
        focus
        class="input-bar-input"
        v-model.trim="pagination.keywords"
        @confirm="handleSearch"
        confirm-type="search"
        @blur="blurHandle"
      />
      <view class="input-bar-show" v-else @tap="inputbarClick">
        <uni-icons type="search" size="23" color="#FFF"></uni-icons>
        <text class="input-bar-showtext">搜索</text>
      </view>
      <view class="btn-search" @tap="handleSearch"> 搜索 </view>
    </view>
    <view class="logo">
      <image
        class="logo-img"
        src="https://ucp-tcg.com:18001/mc/app/static/logo.png"
        mode="aspectFit"
      ></image>
    </view>

    <view class="filter-bar">
      <view class="btn-filter" @tap="showSearchPopup"> 高级搜索 </view>
      <!-- <view class="btn-filter"
				@tap="redirectFunc('/pages/index/news?title=规则手册&nurl=https://mp.weixin.qq.com/s/oosvjgjjVOzGGCdCEvu3Pg')">
				规则手册
			</view> -->
      <view class="btn-filter" @tap="redirectFunc('/pages/product/index')">
        产品列表
      </view>
      <view class="btn-filter" @tap="redirectFunc('/pages/card/scoringtool')">
        记分工具
      </view>
    </view>
    <TabBar :active="1" />
  </view>
  <!-- 普通弹窗 -->
  <uni-popup
    ref="popupRef"
    background-color="#fff"
    type="right"
    @change="popupChange"
  >
    <view
      :style="{ paddingTop: store.menuButtonInfo.bottom + 'px' }"
      class="popup-content popup-height"
    >
      <scroll-view class="drawer-height" scroll-y="true">
        <!-- <view class="search-filters">
					<view class="search-filters-title">
						等级
					</view>
					<view class="search-filters-list">
						<view class="item" :class="{active: cardLevel.dictValue=== pagination.cardLevel}"
							v-for="(cardLevel) of cardLevelList" :key="cardLevel.dictCode"
							@tap="onItemClick('cardLevel',cardLevel.dictValue)">
							{{cardLevel.dictLabel}}
						</view>
					</view>
				</view> -->
        <!-- <view class="search-filters">
					<view class="search-filters-title">
						费用
					</view>
					<view class="search-filters-list">
						<view class="item" :class="{active: cost.dictValue=== pagination.cost}"
							v-for="(cost) of costsList" :key="cost.dictCode" @tap="onItemClick('cost',cost.dictValue)">
							{{cost.dictLabel}}
						</view>
					</view>
				</view> -->
        <!-- <view class="search-filters">
					<view class="search-filters-title">
						颜色
					</view>
					<view class="search-filters-list">
						<view class="item" :class="{active: color.dictValue=== pagination.color}"
							v-for="(color) of colorsList" :key="color.dictCode"
							@tap="onItemClick('color',color.dictValue)">
							{{color.dictLabel}}
						</view>
					</view>
				</view> -->
        <!-- <view class="search-filters">
					<view class="search-filters-title">
						阵营
					</view>
					<view class="search-filters-list">
						<view class="item" :class="{active: camp.dictValue=== pagination.camp}"
							v-for="(camp) of campsList" :key="camp.dictCode" @tap="onItemClick('camp',camp.dictValue)">
							{{camp.dictLabel}}
						</view>
					</view>
				</view> -->
        <view class="search-filters">
          <view class="search-filters-title">
            <view class="search-icon"></view>
            <text>标签</text>
          </view>
          <view class="search-filters-list">
            <input
              class="search-input"
              v-model.trim="pagination.tags"
              @confirm="popupSearch"
              confirm-type="search"
              placeholder="输入标签"
              placeholder-style="font-size: 28rpx;"
            />
          </view>
        </view>
        <view class="search-filters">
          <view class="search-filters-title">
            <view class="search-icon"></view>
            <text>卡牌能力</text>
          </view>
          <view class="search-filters-list">
            <input
              class="search-input"
              v-model.trim="pagination.effect"
              @confirm="popupSearch"
              confirm-type="search"
              placeholder="输入卡牌能力"
              placeholder-style="font-size: 28rpx;"
            />
          </view>
        </view>
      </scroll-view>
      <view class="search-button-bar">
        <view class="search-filters-reset" @tap="handleReset"> 重置 </view>
        <view class="search-filters-submit" @tap="popupSearch"> 搜索 </view>
      </view>

      <!-- </view> -->
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
// import {
// 	dictionaryApi
// } from '@/api/common'
import TabBar from '@/components/TabBar'
import HeadNav from '@/components/HeadNav'
import { useDeviceStore } from '@/stores/modules/deviceStore'
const store = useDeviceStore()
const showSearchInput = ref(false)
const pagination = reactive({
  // page: 0,
  // size: 10,
  // loadingStatus: '',
  // pageLimit: false
  keywords: '',
  // camp: '',
  // cost: '',
  // color: '',
  // cardLevel: '',
  tags: '',
  effect: ''
})

const popupRef = ref(null)
const popupShow = ref(false)
// const costsList = ref([])
// const campsList = ref([])
// const cardLevelList = ref([])
// const colorsList = ref([])
onLoad(() => {
  // getDictionary()
})

// const onSearch = () => {
// 	// if (pagination.keywords.length === 0) {
// 	// 	showVideoList.value = oldDataList
// 	// 	return false
// 	// }
// 	// showVideoList.value = showVideoList.value.filter(item => item.name.includes(pagination.keywords))
// }
const getDictionary = () => {
  // dictionaryApi('cost_dict').then(res => {
  // 	costsList.value = res.data
  // })
  // dictionaryApi('color_dict').then(res => {
  // 	colorsList.value = res.data
  // })
  // dictionaryApi('card_level_dict').then(res => {
  // 	cardLevelList.value = res.data
  // })
}

const handleReset = () => {
  // pagination.cardLevel = ''
  // pagination.cost = ''
  // pagination.color = ''
  pagination.tags = ''
  pagination.effect = ''
  uni.showToast({
    title: '已重置搜索条件',
    icon: 'none'
  })
}

const blurHandle = event => {
  if (event.detail.value.length === 0) {
    showSearchInput.value = false
  }
}

const inputbarClick = () => {
  showSearchInput.value = true
}

const showSearchPopup = () => {
  popupRef.value.open()
}

const popupChange = e => {
  popupShow.value = e.show
}

const redirectFunc = url => {
  uni.navigateTo({
    url: url
  })
}

const handleSearch = () => {
  // uni.navigateTo({
  // 	url: `/pages/card/list?keywords=${pagination.keywords}&cardLevel=${pagination.cardLevel}&color=${pagination.color}&cost=${pagination.cost}&tags=${pagination.tags}&effect=${pagination.effect}`
  // });
  uni.navigateTo({
    url: `/pages/card/list?keywords=${pagination.keywords}&tags=${pagination.tags}&effect=${pagination.effect}`
  })
}

const popupSearch = () => {
  popupRef.value.close()
  // uni.navigateTo({
  // 	url: `/pages/card/list?keywords=${pagination.keywords}&cardLevel=${pagination.cardLevel}&color=${pagination.color}&cost=${pagination.cost}&tags=${pagination.tags}&effect=${pagination.effect}`
  // });
  uni.navigateTo({
    url: `/pages/card/list?keywords=${pagination.keywords}&tags=${pagination.tags}&effect=${pagination.effect}`
  })
}

// const onItemClick = (name, value) => {
// 	console.log(name, value)
// 	switch (name) {
// 		// case 'cardLevel':
// 		// 	if (pagination.cardLevel === value) {
// 		// 		pagination.cardLevel = ''
// 		// 	} else {
// 		// 		pagination.cardLevel = value
// 		// 	}

// 		// 	break;
// 		// case 'color':
// 		// 	if (pagination.color === value) {
// 		// 		pagination.color = ''
// 		// 	} else {
// 		// 		pagination.color = value
// 		// 	}

// 		// 	break;
// 		// case 'cost':
// 		// 	if (pagination.cost === value) {
// 		// 		pagination.cost = ''
// 		// 	} else {
// 		// 		pagination.cost = value
// 		// 	}

// 		// 	break;
// 	}
// }

onShareAppMessage(res => {
  // if (res.from === 'button') {// 来自页面内分享按钮
  //   console.log(res.target)
  // }
  return {
    title: '欢迎使用共鸣对决', // 分享标题
    path: '/pages/index/index' // 分享路径
    // imageUrl: 'https://example.com/image.png', // 分享图标
  }
})
</script>

<style lang="scss" scoped>
.container {
  background-color: #f0f0ee;
  //   padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  //   min-height: 88vh;
  height: 100vh;
  box-sizing: border-box;
  background: url('https://ucp-tcg.com:18001/mc/app/static/BG.jpg') no-repeat;
  background-size: cover;
  //   background-position-y: -20rpx;
}

.search-bar {
  padding: 16rpx 24rpx;
  // background-color: #45463A;
  background: url('https://ucp-tcg.com:18001/mc/app/static/d_bg.png');
  //   background-size: cover;
  background-repeat: repeat-x;
  color: #fff;
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;

  .input-bar-show {
    height: 72rpx;
    display: flex;
    // width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #ffffff4d;
    border-radius: 12rpx;
    flex: 1;

    .input-bar-showtext {
      line-height: 48rpx;
      margin-left: 8rpx;
      letter-spacing: 2rpx;
    }
  }

  .input-bar-input {
    height: 72rpx;
    background-color: #ffffff4d;
    border-radius: 12rpx;
    padding-left: 16rpx;
    flex: 1;
  }

  .btn-search {
    border: 2rpx solid #cccccc;
    padding: 16rpx 30rpx;
    color: #ffffff;
    font-size: 28rpx;
    line-height: 40rpx;
    border-radius: 12rpx;
    background-color: #333333;
  }
}

.logo {
  padding-top: 230rpx;
  .logo-img {
    height: 260rpx;
    margin: 0 auto;
    display: block;
  }
}

.filter-bar {
  margin-top: 20rpx;
  padding: 0 32rpx;
  // padding: 32rpx 0;
  display: flex;
  // gap: 32rpx;
  justify-content: space-between;
  align-items: center;

  .filter-bar-left {
    display: flex;
    gap: 24rpx;
    // width: 100%;
  }

  .filter-bar-right {
    display: flex;
    justify-content: flex-end;
    gap: 24rpx;
    align-items: center;

    .btn-reset {
      background-color: #f1f1f1;
      border: 2rpx solid #ffffff;
      border-radius: 10rpx;
      font-size: 32rpx;
      padding: 14rpx 28rpx;
      box-shadow: 0 0 12rpx #00000029;
    }

    .btn-search-box {
      background-color: #f1f1f1;
      border: 2rpx solid #ffffff;
      border-radius: 10rpx;
      padding: 14rpx 28rpx;
      box-shadow: 0 0 12rpx #00000029;
    }
  }

  .select-box {
    width: 160rpx;
  }

  .btn-filter {
    border-radius: 14rpx;
    border: 2rpx solid #c9ac67;
    box-shadow: 0 0 10rpx #00000059;
    color: #bb9f5e;
    font-size: 28rpx;
    background-color: #3b3935;
    width: 30%;
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 4rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/button-bg.png');
    background-repeat: no-repeat;
    background-size: 71% 100%;
  }
}

.card-bar {
  // padding: 0 32rpx;

  .tag-item-title {
    color: #bb9f5e;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 44rpx;
    text-align: center;
    margin-bottom: 16rpx;
  }

  .card-list {
    padding: 18rpx 24rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .card-item {
      width: 48.5%;
      margin-bottom: 20rpx;

      .card-image {
        width: 100%;
        border-radius: 20rpx;
        height: 500rpx;
      }
    }
  }
}

@mixin height {
  /* #ifndef APP-NVUE */
  height: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}

@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.popup-content {
  // @include flex;
  // align-items: center;
  // justify-content: center;
}

.popup-height {
  @include height;
  width: 80vw;
  position: relative;
  box-sizing: border-box;
}

.search-filters {
  font-family: PingFangSC-Regular, sans-serif;
  // width: 100%;
  margin-bottom: 20rpx;
  padding: 0 15px;
  // box-sizing: border-box;
}

.search-filters-title {
  padding: 10rpx 0 18rpx;
  color: #333333;
  font-weight: 600;
  line-height: 44rpx;
  font-size: 32rpx;
  // border-bottom: 2rpx solid transparent;
  display: flex;
  gap: 24rpx;
  align-items: center;
  background-image: url('https://ucp-tcg.com:18001/mc/app/static/search-line.png');
  background-repeat: no-repeat;
  background-size: 100% 14rpx;
  background-position: bottom;
  .search-icon {
    width: 16rpx;
    height: 32rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/icon_zs.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.search-filters-list {
  padding-top: 34rpx;
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;

  .search-input {
    width: 100%;
    height: 70rpx;
    background-color: #e5e7e9;
    border-color: #dddddd;
    border-radius: 12rpx;
    padding-left: 16rpx;
    font-size: 28rpx;
  }

  .item {
    width: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #e5e5e5;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333333;
    padding: 16rpx 0;

    &.active {
      border-color: #bb9f5e;
    }
  }
}

.search-button-bar {
  display: flex;
  gap: 100rpx;
  justify-content: center;
  width: 100%;
  // border-top: 2rpx solid #DDDDDD;
  padding: 20rpx 32rpx;
  // padding-top: 40rpx;
  position: absolute;
  box-sizing: border-box;
  bottom: env(safe-area-inset-bottom);

  .search-filters-reset {
    border-radius: 12rpx;
    border: 2rpx solid #cccccc;
    background-color: #e1e1e1;
    // width: 264rpx;
    height: 72rpx;
    // line-height: 72rpx;
    width: 45%;
    // padding: 16rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // text-align: center;
    color: #333333;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg1.png');
    background-repeat: no-repeat;
    background-size: contain;
  }

  .search-filters-submit {
    border-radius: 12rpx;
    border: 2rpx solid #cccccc;
    background-color: #333333;
    // width: 264rpx;
    height: 72rpx;
    // line-height: 72rpx;
    // text-align: center;
    width: 45%;
    // padding: 16rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg2.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.drawer-height {
  max-height: 88vh;
  box-sizing: border-box;
  //   padding-top: calc(17% + env(safe-area-inset-top));
  //   padding-top: 16rpx;
  //   padding-top: calc(16rpx + env(safe-area-inset-top));
  //   padding-bottom: env(safe-area-inset-bottom);
}
</style>
